<template>
	<view class="container">
		<view class="nav-wrap">
			<view v-for="(item, index) in navList" class="" @click="change(item.tab)">
				<text :class="{active:tab==item.tab}">{{ item.name }}</text>
			</view>
		</view>
		<input type="text" v-model="keywords" /><button type="default" @click="search">搜索</button>
		<view class="con">
			<view v-for="(item,index) in conList" class="" @click="gotodetail(item.id)">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
import { getList } from '../../request/api.js';
export default {
	data() {
		return {
			tab:"all",
			conList:[],
			page:1,
			keywords:"",
			copyList:[],
			navList: [
				{
					name: '全部',
					tab: 'all'
				},
				{
					name: '精华',
					tab: 'good'
				},
				{
					name: '分享',
					tab: 'share'
				},
				{
					name: '问答',
					tab: 'ask'
				},
				{
					name: '招聘',
					tab: 'job'
				}
			]
		};
	},
	methods: {
		change(tab){
			this.page=1;
			this.conList=[];
			this.tab=tab
			this.getData()
			
		},
		//点击tab切换的时候
		
		getData(){
			getList({tab:this.tab,page:this.page,limit:20}).then(res=>{
				
				this.conList=[...this.conList,...res.data]
				this.copyList=[...this.conList,...res.data]
			})
		},
		//请求数据的方法 这个方法要单独提出来 在我们点击tab切换的时候触发 下拉加载的时候也要触发
		gotodetail(id){
			uni.navigateTo({
				url:"/pages/detail/detail?id="+id
			})
		},
		search(){
			this.conList=this.copyList.filter(item=>{
				return item.title.includes(this.keywords)
			})
			this.keywords=""
			
			
		}
		//搜索效果
		
	},
	onReachBottom() {
		this.page++;
		
		this.getData()
		console.log(this.conList)
		
	},
	//触底加载时间
	onLoad() {
		this.getData()
	},
	//进入页面请求一下数据
	onPullDownRefresh() {
		this.page=1;
		this.conList=[];
		this.getData()
	},
	//下拉刷新
	
};
</script>

<style lang="scss">
.container {
	.nav-wrap {
		width: 100%;
		display: flex;
		view {
			flex: 1;
			height: 40px;
			line-height: 40px;
			text-align: center;
		color: #18bc37;
			
			.active {
				background: #18bc37;
				padding: 5px;
				border-radius: 3px;
				color: #fff;
			}
		}
	}
	.con{
		view{
			// height: 80rpx;
			padding: 10px;
			// line-height: 80rpx;
		}
	}
}
</style>
